<script setup lang="ts">
import { ref } from 'vue'
import * as accountApi from '@/api/account'
import { message } from 'ant-design-vue'

const emit = defineEmits<{
  selectRobot: [robotId: string]
}>()

const { direction } = withDefaults(defineProps<{ direction?: string }>(), {
  direction: 'left',
})

// 拉取机器人列表
let okRobat = ref<string>()
import type { SelectProps } from 'ant-design-vue'
const robatList = ref<SelectProps['options']>([])
interface OptionList {
  label: string
  value: string
}
let optionList = ref<Array<OptionList>>([])
const getRobatList = async () => {
  const params = { currentPage: 1, pageSize: 100 }
  try {
    let { state, data, message: msg } = await accountApi.getFishRobotList(params)
    if (state === 200) {
      robatList.value = data.list
      optionList.value = data.list.map((item: any) => {
        return {
          label: item.nickName,
          value: item.id,
        }
      })

      if (data.list.length == 0) {
        message.error('无平台账号，请先添加平台账号')
      } else if (data.list.length > 0) {
        selectRobat(data.list[0].id)
      }
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
const selectRobat = (selectValue: any) => {
  okRobat.value = selectValue as string
  emit('selectRobot', okRobat.value)
}

onMounted(() => getRobatList())

// select搜索
const filterOption = (input: string, option: any) => {
  return option.label.indexOf(input) >= 0
}
</script>

<template>
  <div :style="{ margin: '5px 0', textAlign: direction }">
    <span>闲鱼账号：</span>
    <a-select
      v-model:value="okRobat"
      placeholder="请选择"
      @change="selectRobat"
      style="width: 200px; text-align: left"
      show-search
      :options="optionList"
      :filter-option="filterOption"
    >
      <a-select-option v-for="(item, index) in optionList" :key="index" :value="item.value">
        {{ item.label }}
      </a-select-option>
    </a-select>
  </div>
</template>
